import React, { useEffect, useImperativeHandle } from 'react';
import { Radio, Form, Field, Input } from '@alifd/next';

const Operation = (props, ref) => {
  const { actionType } = props;
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const dataSource = props.dataSource || {};
  const field = Field.useField([]);
  useEffect(() => {
    field.reset();
    let newValues = {};
    if (Object.keys(dataSource).length > 0) {
      newValues = {
        userId: dataSource.userId,
        username: dataSource.username,
        email: dataSource.email,
        mobile: dataSource.mobile,
        status: dataSource.status,
        createTime: dataSource.createTime,
      };
    } else {
      newValues = { status: 1 };
    }
    field.setValues(newValues);
  }, [field, dataSource]);
  useImperativeHandle(ref, () => {
    return {
      getValues(callback) {
        field.validate((errors, values) => {
          if (errors) {
            return;
          }

          callback(values);
        });
      },
    };
  });
  const isPreview = actionType === 'preview';

  return (
    <>
      <Form
        isPreview={isPreview}
        fullWidth
        useLabelForErrorMessage
        field={field}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
      >
        <Form.Item label="用户名" required={!isPreview}>
          <Input name="username" />
        </Form.Item>
        {isPreview ? null : (
          <>
            <Form.Item
              label="密码"
              required={actionType === 'add'}
              pattern={/[\w]{6,20}/}
              patternMessage="密码 必须由6-20个字母、数字或下划线组成的字符串！"
              validator={(rule, value, callback) => {
                if (value) {
                  field.validate(['rePassword']);
                }
                callback();
              }}
            >
              <Input.Password name="password" placeholder="必须由6-20个字母、数字或下划线组成的字符串" />
            </Form.Item>
            <Form.Item
              label="确认密码"
              required={actionType === 'add'}
              validator={(rule, value, callback) => {
                if (value !== field.getValue('password')) {
                  return callback('确认密码与密码不一致！');
                } else {
                  return callback();
                }
              }}
            >
              <Input.Password name="rePassword" placeholder="与密码一致" />
            </Form.Item>
          </>
        )}
        <Form.Item label="邮箱" format="email" required={!isPreview}>
          <Input name="email" />
        </Form.Item>
        <Form.Item label="手机号" format="number">
          <Input name="mobile" />
        </Form.Item>
        <Form.Item label="状态" required={!isPreview}>
          <Radio.Group
            name="status"
            dataSource={[
              { label: '禁用', value: 0 },
              { label: '启用', value: 1 },
            ]}
          />
        </Form.Item>
        {isPreview ? (
          <Form.Item label="创建时间">
            <Input name="createTime" />
          </Form.Item>
        ) : null}
      </Form>
    </>
  );
};

export default React.forwardRef(Operation);
